import React, { useState } from 'react';
import { Upload, Button, Avatar, message, Modal, Form, Input, Card } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { UploadFile } from 'antd/es/upload/interface';
import { PageContainer } from '@ant-design/pro-layout';
import styles from './Settings.less';
import { useCurrentUser } from '@/pages/useCurrentUser';

const Settings: React.FC = () => {
  const [form] = Form.useForm();
  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewImage, setPreviewImage] = useState('');

  const { user } = useCurrentUser();
  const initialFileList = user?.avatarUrl
    ? [
        {
          uid: 'current-avatar',
          name: 'current-avatar.jpg',
          status: 'done',
          url: user.avatarUrl,
        },
      ]
    : [];
  const [fileList] = useState<UploadFile[]>(initialFileList);

  const beforeUpload = (file: UploadFile) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
      message.error('请上传图片格式文件！');
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过 2MB！');
      return false;
    }
    return true;
  };

  const handleUploadSuccess = (response: any, file: UploadFile) => {
    message.success('头像上传成功');
    window.location.reload();
  };

  const handlePreview = (file: UploadFile) => {
    setPreviewImage(file.url || file.thumbUrl || '');
    setPreviewVisible(true);
  };

  const handleFinish = (values: any) => {
    console.log('表单提交内容：', values);
    message.success('个人设置保存成功');
  };

  return (
    <PageContainer title="个人设置" contentStyle={{ paddingBottom: 64 }}>
      <Card className={styles.settingCard} bordered={false}>
        <Form
          form={form}
          onFinish={handleFinish}
          layout="vertical"
          initialValues={{
            username: user?.username || '',
          }}
        >
          <Form.Item label="头像设置">
            <Upload
              action="/api/file/uploadAvatar"
              fileList={fileList}
              beforeUpload={beforeUpload}
              onPreview={handlePreview}
              onSuccess={handleUploadSuccess}
              showUploadList={false}
              data={{ userAccount: user?.userAccount || '' }}
              name="file"
            >
              {/* 关键：使用 flex 布局实现并排居中 */}
              <div className={styles.avatarUploadContainer}>
                <Avatar
                  size={100} // 调整头像尺寸以适配并排布局
                  src={user?.avatarUrl}
                  className={styles.avatar}
                />
                <Button icon={<UploadOutlined />} type="primary" className={styles.uploadBtn}>
                  点击上传新头像
                </Button>
              </div>
            </Upload>
            <Modal visible={previewVisible} footer={null} onCancel={() => setPreviewVisible(false)}>
              <img alt="preview" style={{ width: '100%' }} src={previewImage} />
            </Modal>
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  );
};

export default Settings;
